import { useState } from 'react';
import CuboxHoudini from './CuboxHoudini';

const CuboxHoudiniDemo = () => {
  const [globalRadius, setGlobalRadius] = useState(20);
  const [globalSharpness, setGlobalSharpness] = useState(1);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>Cubox Houdini Paint API Demo</h1>
      
      <div style={{ marginBottom: '30px' }}>
        <h2>Interactive Controls</h2>
        <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
          <label>
            Corner Radius: {globalRadius}
            <br />
            <input
              type="range"
              min="5"
              max="50"
              value={globalRadius}
              onChange={(e) => setGlobalRadius(Number(e.target.value))}
            />
          </label>
          <label>
            Corner Sharpness: {globalSharpness.toFixed(2)}
            <br />
            <input
              type="range"
              min="0"
              max="1"
              step="0.1"
              value={globalSharpness}
              onChange={(e) => setGlobalSharpness(Number(e.target.value))}
            />
          </label>
        </div>
        
        <CuboxHoudini
          cornerRadius={globalRadius}
          cornerSharpness={globalSharpness}
          backgroundColor="#007bff"
          style={{ 
            width: '200px', 
            height: '100px', 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'center',
            color: 'white',
            fontWeight: 'bold'
          }}
        >
          Interactive Cubox
        </CuboxHoudini>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>Basic Examples</h2>
        <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
          <CuboxHoudini
            cornerRadius={15}
            backgroundColor="#343434"
            style={{ 
              width: '120px', 
              height: '80px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: 'bisque'
            }}
          >
            Default
          </CuboxHoudini>

          <CuboxHoudini
            cornerRadius={25}
            borderWidth={2}
            borderColor="bisque"
            backgroundColor="transparent"
            style={{ 
              width: '120px', 
              height: '80px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: '#343434'
            }}
          >
            Outlined
          </CuboxHoudini>

          <CuboxHoudini
            cornerRadius={20}
            cornerSharpness={0}
            backgroundColor="#28a745"
            style={{ 
              width: '120px', 
              height: '80px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: 'white'
            }}
          >
            Sharp
          </CuboxHoudini>
        </div>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>Individual Corner Control</h2>
        <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
          <CuboxHoudini
            cornerRadius={30}
            cornerSharpnessTopLeft={0}
            cornerSharpnessBottomRight={0}
            backgroundColor="#dc3545"
            style={{ 
              width: '120px', 
              height: '80px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: 'white',
              fontSize: '12px',
              textAlign: 'center'
            }}
          >
            Sharp TL & BR
          </CuboxHoudini>

          <CuboxHoudini
            cornerRadiusTopLeft={5}
            cornerRadiusTopRight={40}
            cornerRadiusBottomRight={5}
            cornerRadiusBottomLeft={40}
            backgroundColor="#ffc107"
            style={{ 
              width: '120px', 
              height: '80px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: '#333',
              fontSize: '12px',
              textAlign: 'center'
            }}
          >
            Mixed Radius
          </CuboxHoudini>
        </div>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>Border Styles</h2>
        <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
          <CuboxHoudini
            cornerRadius={20}
            borderWidth={2}
            borderStyle="solid"
            borderColor="#007bff"
            backgroundColor="transparent"
            style={{ 
              width: '100px', 
              height: '60px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: '#007bff',
              fontSize: '12px'
            }}
          >
            Solid
          </CuboxHoudini>

          <CuboxHoudini
            cornerRadius={20}
            borderWidth={3}
            borderStyle="dashed"
            borderColor="#28a745"
            backgroundColor="transparent"
            style={{ 
              width: '100px', 
              height: '60px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: '#28a745',
              fontSize: '12px'
            }}
          >
            Dashed
          </CuboxHoudini>

          <CuboxHoudini
            cornerRadius={20}
            borderWidth={2}
            borderStyle="dotted"
            borderColor="#dc3545"
            backgroundColor="transparent"
            style={{ 
              width: '100px', 
              height: '60px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              color: '#dc3545',
              fontSize: '12px'
            }}
          >
            Dotted
          </CuboxHoudini>
        </div>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>Theme Examples</h2>
        <div style={{ display: 'flex', gap: '15px', flexWrap: 'wrap' }}>
          {[
            { bg: '#343434', name: 'Dark' },
            { bg: '#f5f5f5', name: 'Light', color: '#333' },
            { bg: '#007bff', name: 'Primary' },
            { bg: '#28a745', name: 'Success' },
            { bg: '#ffc107', name: 'Warning', color: '#333' },
            { bg: '#dc3545', name: 'Danger' },
          ].map((theme, index) => (
            <CuboxHoudini
              key={index}
              cornerRadius={18}
              backgroundColor={theme.bg}
              style={{ 
                width: '90px', 
                height: '50px', 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center',
                color: theme.color || 'white',
                fontSize: '12px',
                cursor: 'pointer',
                transition: 'transform 0.1s'
              }}
              onMouseEnter={(e) => e.target.style.transform = 'scale(1.05)'}
              onMouseLeave={(e) => e.target.style.transform = 'scale(1)'}
            >
              {theme.name}
            </CuboxHoudini>
          ))}
        </div>
      </div>

      <div style={{ marginTop: '40px', padding: '20px', backgroundColor: '#f8f9fa', borderRadius: '8px' }}>
        <h3>Usage Notes:</h3>
        <ul style={{ fontSize: '14px', lineHeight: '1.6' }}>
          <li><strong>CSS Custom Properties:</strong> Use <code>--corner-radius</code> and <code>--corner-sharpness</code> for global settings</li>
          <li><strong>Individual Corners:</strong> Override with <code>--corner-radius-top-left</code>, <code>--corner-sharpness-bottom-right</code>, etc.</li>
          <li><strong>Browser Support:</strong> Falls back to regular <code>border-radius</code> if Paint API is not supported</li>
          <li><strong>Performance:</strong> Paint worklet runs on the compositor thread for smooth animations</li>
          <li><strong>Sharpness:</strong> Values from 0 (sharp/linear) to 1 (curved/bezier)</li>
        </ul>
      </div>
    </div>
  );
};

export default CuboxHoudiniDemo;
